<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" 
		content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Filtered RoundRectList - demo</title>
	
	<!-- This test shows a dojox/mobile/RoundRectList filtered using dojox/mobile/FilteredListMixin. -->
	<!-- Use-case: markup; demonstrates the customization of filtering criteria. -->

	<script type="text/javascript" src="../deviceTheme.js"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" 
		data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojo/ready",
			"dijit/registry",
			"dojox/mobile/FilteredListMixin",
			"dojox/mobile/ScrollableView",
			"dojox/mobile/SimpleDialog",
			"dojox/mobile/RoundRect",
			"dojox/mobile/Button",
			"dojox/mobile/RadioButton",
			"dojox/mobile/Switch"
			], function(parser, mobile, compat, ready, registry, 
						FilteredListMixin, ScrollableView, SimpleDialog, RoundRect, Button, RadioButton, Switch){
			
			var filterBox;
			
			// Shows the Search Options dialog.
			showOptions = function(dlg){
				registry.byId(dlg).show();
			};

			// Hides the Search Options dialog. Optionally, applies the new search options.
			hideOptions = function(dlg, applyOptions){
				registry.byId(dlg).hide();
				if(applyOptions){
					filterBox.set("ignoreCase", registry.byId("ignoreCaseSwitch").value == "on");
					filterBox.set("incremental", registry.byId("incrementalSwitch").value == "on");
					if (registry.byId("radioStartsWith").checked){
						filterBox.queryExpr = "${0}*";
					}else if(registry.byId("radioContains").checked){
						filterBox.queryExpr = "*${0}*";
					}else if(registry.byId("radioIs").checked){
						filterBox.queryExpr = "${0}";
					}
				}
			};
			
			ready(function(){
				filterBox = registry.byId("filterBox");
			});
		});
	</script>
	
	<style>
		/* Fit the margin defined by mblRoundRectList in all themes but ipad */
		.searchOptions {
			float: right; 
			margin-right: 9px;
		}
		/* Fit the margin defined by mblRoundRectList for ipad */
		.dj_ipad.dj_tablet .searchOptions {
			float: right; 
			margin-right: 30px;
		}
		.lnk {
			font-size: 14px;
			color: #0B5199;
			text-decoration: none;
		}
		.mblSimpleDialogButton {
			margin: 7px 0 0;
			width: 262px;
			font-size: 17px;
			font-weight: bold;
			opacity: 0.95;
		}
		.mblSimpleDialogButton2l {
			float: left;
			width: 127px;
			margin: 7px 0 0;
			font-size: 17px;
			font-weight: bold;
			opacity: 0.95;
		}
		.mblSimpleDialogButton2r {
			float: right;
			width: 127px;
			margin: 7px 0 0;
			font-size: 17px;
			font-weight: bold;
			opacity: 0.95;
		}
	</style>
</head>

<body style="visibility:hidden;background-color:#424142;">
	<div data-dojo-type="dojox/mobile/View">
		<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed: 'top'">Filtered RoundRectList</h1>
		<div class="mblFilteredRoundRectListSearchBox">
			<input data-dojo-type="dojox/mobile/SearchBox" type="search" id="filterBox"
				data-dojo-props="filterBoxRef: 'filterBox'"
				style="width: 50%; float: left">
		</div>
		<button class="searchOptions" onclick="showOptions('dlg_options')">Options</button>
		<div data-dojo-type="dojox/mobile/ScrollableView">
			<ul id="list" data-dojo-type="dojox/mobile/RoundRectList"
				data-dojo-mixins="dojox/mobile/FilteredListMixin"
				data-dojo-props="filterBoxRef: 'filterBox', placeHolder: 'Search'">
				<li data-dojo-type="dojox/mobile/ListItem">Alabama</li>
				<li data-dojo-type="dojox/mobile/ListItem">Alaska</li>
				<li data-dojo-type="dojox/mobile/ListItem">American Samoa</li>
				<li data-dojo-type="dojox/mobile/ListItem">Arizona</li>
				<li data-dojo-type="dojox/mobile/ListItem">Arkansas</li>
				<li data-dojo-type="dojox/mobile/ListItem">Armed Forces Europe</li>
				<li data-dojo-type="dojox/mobile/ListItem">Armed Forces Pacific</li>
				<li data-dojo-type="dojox/mobile/ListItem">Armed Forces the Americas</li>
				<li data-dojo-type="dojox/mobile/ListItem">California</li>
				<li data-dojo-type="dojox/mobile/ListItem">Colorado</li>
				<li data-dojo-type="dojox/mobile/ListItem">Connecticut</li>
				<li data-dojo-type="dojox/mobile/ListItem">Delaware</li>
				<li data-dojo-type="dojox/mobile/ListItem">District of Columbia</li>
				<li data-dojo-type="dojox/mobile/ListItem">Federated States of Micronesia</li>
				<li data-dojo-type="dojox/mobile/ListItem">Florida</li>
				<li data-dojo-type="dojox/mobile/ListItem">Georgia</li>
				<li data-dojo-type="dojox/mobile/ListItem">Guam</li>
				<li data-dojo-type="dojox/mobile/ListItem">Hawaii</li>
				<li data-dojo-type="dojox/mobile/ListItem">Idaho</li>
				<li data-dojo-type="dojox/mobile/ListItem">Illinois</li>
				<li data-dojo-type="dojox/mobile/ListItem">Indiana</li>
				<li data-dojo-type="dojox/mobile/ListItem">Iowa</li>
				<li data-dojo-type="dojox/mobile/ListItem">Kansas</li>
				<li data-dojo-type="dojox/mobile/ListItem">Kentucky</li>
				<li data-dojo-type="dojox/mobile/ListItem">Louisiana</li>
				<li data-dojo-type="dojox/mobile/ListItem">Maine</li>
				<li data-dojo-type="dojox/mobile/ListItem">Marshall Islands</li>
				<li data-dojo-type="dojox/mobile/ListItem">Maryland</li>
				<li data-dojo-type="dojox/mobile/ListItem">Massachusetts</li>
				<li data-dojo-type="dojox/mobile/ListItem">Michigan</li>
				<li data-dojo-type="dojox/mobile/ListItem">Minnesota</li>
				<li data-dojo-type="dojox/mobile/ListItem">Mississippi</li>
				<li data-dojo-type="dojox/mobile/ListItem">Missouri</li>
				<li data-dojo-type="dojox/mobile/ListItem">Montana</li>
				<li data-dojo-type="dojox/mobile/ListItem">Nebraska</li>
				<li data-dojo-type="dojox/mobile/ListItem">Nevada</li>
				<li data-dojo-type="dojox/mobile/ListItem">New Hampshire</li>
				<li data-dojo-type="dojox/mobile/ListItem">New Jersey</li>
				<li data-dojo-type="dojox/mobile/ListItem">New Mexico</li>
				<li data-dojo-type="dojox/mobile/ListItem">New York</li>
				<li data-dojo-type="dojox/mobile/ListItem">North Carolina</li>
				<li data-dojo-type="dojox/mobile/ListItem">North Dakota</li>
				<li data-dojo-type="dojox/mobile/ListItem">Northern Mariana Islands</li>
				<li data-dojo-type="dojox/mobile/ListItem">Ohio</li>
				<li data-dojo-type="dojox/mobile/ListItem">Oklahoma</li>
				<li data-dojo-type="dojox/mobile/ListItem">Oregon</li>
				<li data-dojo-type="dojox/mobile/ListItem">Pennsylvania</li>
				<li data-dojo-type="dojox/mobile/ListItem">Puerto Rico</li>
				<li data-dojo-type="dojox/mobile/ListItem">Rhode Island</li>
				<li data-dojo-type="dojox/mobile/ListItem">South Carolina</li>
				<li data-dojo-type="dojox/mobile/ListItem">South Dakota</li>
				<li data-dojo-type="dojox/mobile/ListItem">Tennessee</li>
				<li data-dojo-type="dojox/mobile/ListItem">Texas</li>
				<li data-dojo-type="dojox/mobile/ListItem">Utah</li>
				<li data-dojo-type="dojox/mobile/ListItem">Vermont</li>
				<li data-dojo-type="dojox/mobile/ListItem">Virgin Islands, U.S.</li>
				<li data-dojo-type="dojox/mobile/ListItem">Virginia</li>
				<li data-dojo-type="dojox/mobile/ListItem">Washington</li>
				<li data-dojo-type="dojox/mobile/ListItem">West Virginia</li>
				<li data-dojo-type="dojox/mobile/ListItem">Wisconsin</li>
				<li data-dojo-type="dojox/mobile/ListItem">Wyoming</li>
			</ul>
		</div>
	</div>
	
	<div id="dlg_options" data-dojo-type="dojox/mobile/SimpleDialog">
		<div class="mblSimpleDialogTitle">Search Options</div>
		<table style="width:100%">
			<tr>
				<td><span class="bold">Ignore case</span></td>
				<td style="text-align:left">
					<input type="checkbox" data-dojo-type="dojox/mobile/Switch" 
						id="ignoreCaseSwitch" value="on"></td>
			</tr>
			<tr>
				<td><span class="bold">Incremental</span></td>
				<td style="text-align:left">
					<input type="checkbox" data-dojo-type="dojox/mobile/Switch" 
						id="incrementalSwitch" value="on">
				</td>
			</tr>
			<tr>
				<td style="text-align:left">
					<input type="radio" id="radioStartsWith" data-dojo-type="dojox/mobile/RadioButton" 
						name="mobileRadio" value="Starts with" checked>
					<label for="radioStartsWith">Starts with</label>
				</td>
			</tr>
			<tr>
				<td style="text-align:left">
					<input type="radio" id="radioContains" data-dojo-type="dojox/mobile/RadioButton" 
						name="mobileRadio" value="Contains">
					<label for="radioContains">Contains</label>
				</td>
			</tr>
			<tr>
				<td style="text-align:left">
					<input type="radio" id="radioIs" data-dojo-type="dojox/mobile/RadioButton" 
						name="mobileRadio" value="Is">
					<label for="radioIs">Is</label>
				</td>
			</tr>
		</table>

		<button data-dojo-type="dojox/mobile/Button" class="mblSimpleDialogButton2l" 
			onclick="hideOptions('dlg_options', false)">Cancel</button>
		<button data-dojo-type="dojox/mobile/Button" class="mblSimpleDialogButton2r mblBlueButton" 
			onclick="hideOptions('dlg_options', true)">OK</button>
	</div>
</body>
</html>
